<!-- eslint-disable vue/no-parsing-error -->
<template>
  <!-- 员工管理页面 -->
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="dashboard-text-list">
        <div>
          <el-input
            v-model="inputvalue"
            class="inputname"
            placeholder="请输入员工姓名"
            prefix-icon="el-icon-search"
            @keydown.enter.native="selectlist"
          />
        </div>
        <div><el-button class="addbtn" @click="addbtn">+添加员工</el-button></div>
      </div>
      <div>
        <template>
          <el-table
            v-loading="loading"
            :data="employees"
            style="width: 100%"
          >
            <el-table-column
              prop="username"
              label="员工"
            />
            <el-table-column
              prop="name"
              label="账号"
            />
            <el-table-column
              prop="phone"
              label="手机号"
            />
            <el-table-column
              prop="status"
              label="状态"
            >
              <template v-slot="{ row }">
                {{ row.status | filterStatus }}
              </template>
            </el-table-column>>
            <el-table-column
              label="操作"
              width="180"
            >
              <template slot-scope="scope">
                <el-link type="primary" style="margin-right:20px" @click="edit(scope.row.id)">编辑</el-link>
                <el-link v-if="scope.row.status===0" type="danger" @click="handleClick(scope.row,1)">启动</el-link>
                <el-link v-if="scope.row.status===1" type="danger" @click="handleClick(scope.row,0)">禁用</el-link>
              </template>
            </el-table-column></el-table>
        </template>
      </div>
      <div class="block">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getEmployees, enableOrDisableEmployee } from '@/api/employee'
export default {
  name: 'Employee',
  filters: {
    filterStatus(item) {
      if (item === 1) {
        return '正常'
      } else {
        return '禁用'
      }
    }
  },
  data() {
    return {
      employees: [],
      inputvalue: '',
      titlelist: [
        { lable: '员工', prop: 'name' },
        { lable: '账号', prop: 'idNumber' },
        { lable: '手机号', prop: 'phone' },
        { lable: '账号状态', prop: 'status' }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 100,
      loading: false
    }
  },
  async created() {
    this.selectTable()
  },
  methods: {
    async selectTable() {
      this.loading = true
      const response = await getEmployees({
        page: this.currentPage,
        pageSize: this.pageSize
      })
      this.total = response.total
      this.employees = response.records
      this.loading = false
    },
    // 每页条数
    handleSizeChange(val) {
      this.pageSize = val
      this.selectTable()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.selectTable()
    },
    // 启动，禁用接口
    async handleClick(row, xixi) {
      this.loading = true
      await enableOrDisableEmployee({ id: row.id, status: xixi })
      await this.selectTable()
    },
    // 添加员工
    addbtn() {
      this.$router.push({ name: 'addname' })
    },
    edit(e) {
      this.$router.push({
        name: 'addname',
        params: { id: e }
      })
    },
    // 搜索
    async selectlist() {
      this.loading = true
      const response = await getEmployees({
        page: this.currentPage,
        pageSize: this.pageSize,
        name: this.inputvalue
      })
      this.total = response.total
      this.employees = response.records
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.block {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.dashboard {
  &-container {
    background: #f3f4f7;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    padding: 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    padding: 30px 28px;
    background: #fff;
    &-list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .inputname {
        width: 250px;
      }
      ::v-deep .el-input__inner:focus {
        border-color: #ffc200;
        outline: 0;
      }
      .addbtn {
        width: 110px;
        background: #ffc200;
        color: black;
        border: none;
      }
      .addbtn:hover {
        background: #f3ce58;
      }
    }
  }
}
</style>
